<template>
    <div class="card-container">
        <a-card class="card">

            <div>
                <a @click="toBlogManage">
                    <a-icon type="left"/>
                    <span>博客管理</span>
                </a>
            </div>

            <div class="blog-info">
                <p class="blog-info-title">
                    {{ blogInfo.title }}
                </p>
                <div class="blog-info-content">
                    {{ blogInfo.content }}
                </div>
            </div>

            <div class="blog-action">
                <a @click="successAndView">
                    <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" style="margin-right: 5px"/>
                    <span>发布成功并查看文章</span>
                    <a-icon type="right"/>
                </a>
                <a style="margin-left: 15px" @click="copyLink">复制链接</a>
                <a style="margin-left: 15px" @click="againWriteBlog">在写一篇</a>
            </div>
        </a-card>
    </div>
</template>

<script>
    export default {
        name: "show-after-created",
        data() {
            return {
                blogInfo: this.$store.state.blogInfo
            }
        },
        methods: {
            toBlogManage() {
                this.$router.push({name: 'articleManage'})
            },
            successAndView() {
                this.$router.push({
                    name: 'viewBlog',
                    query: {id: this.blogInfo.id}
                })
            },
            copyLink() {

            },
            againWriteBlog() {
                this.$router.push({
                    name: 'writeBlogMd'
                })
            }
        }
    }
</script>

<style scoped>
    .card {
        width: 600px;
        height: 400px;
        margin: 200px auto;
    }

    .blog-info {
        background: rgb(245, 246, 247);
        width: 520px;
        height: 200px;
        margin-top: 20px;
        padding: 10px;
    }

    .blog-info-title {
        margin-top: 15px;
        font-size: 16px;
        font-weight: bold;
    }

    .blog-info-content {
        font-size: 13px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical; /*使用该属性的前提是display:box;*/
        -webkit-line-clamp: 5; /*显示的行数*/
    }

    .blog-action {
        margin-top: 80px;
        margin-left: 100px;
    }


</style>